<template>
    <!-- layout布局：https://element-plus.youqua.cn/zh-CN/component/layout.html -->
     <!-- 调整长宽居中 justify 调整高度居中 align -->
    <el-row class="login-container" justify="center" :align="`middle`">
<!-- 实现卡片效果  https://element-plus.youqua.cn/zh-CN/component/card.html-->
        <el-card style="max-width: 480px;">
            <template #header>
                <div class="card-header">
                    <img :src="imgUrl" alt="">
                </div>
<!-- 注册账号跳转链接 https://element-plus.youqua.cn/zh-CN/component/link.html -->
                <div class="jump-link" :style="{margin:'0 12px'}">
                    <el-link type="primary" @click="handleChange">{{ formType ? '返回登录':'注册账号' }}</el-link>
                </div>
            </template>
<!-- 用户名密码表单：https://element-plus.youqua.cn/zh-CN/component/form.html-->
  <!-- 表单校验 https://element-plus.youqua.cn/zh-CN/component/form.html-->
   <!-- 自己写的时候出现的问题，没有表单校验是缺少rules绑定 第二个prop校验字段写错 -->
            <el-form 
            ref="loginFormRef"
            :model="loginForm" 
            :rules="rules"
            style="max-width: 600px;"
            class="demo-ruleForm">
                <el-form-item prop="userName">
                    <!-- 表单没有提交时候内容默认显示placeholder:https://element-plus.youqua.cn/zh-CN/component/input.html -->
                    <el-input v-model="loginForm.userName" placeholder="手机号" :prefix-icon="UserFilled"></el-input>
                </el-form-item>
<!-- 密码 -->
                <el-form-item prop="passWord">
                    <!-- 表单没有提交时候内容默认显示placeholder:https://element-plus.youqua.cn/zh-CN/component/input.html -->
                    <el-input v-model="loginForm.passWord" placeholder="密码" :prefix-icon="Lock"></el-input>
                </el-form-item>
<!-- 验证码 验证码只有在注册的时候才会显示-->
                <el-form-item v-if="formType"  prop="validCode">
                    <!-- 表单没有提交时候内容默认显示placeholder:https://element-plus.youqua.cn/zh-CN/component/input.html -->
                    <el-input v-model="loginForm.validCode" placeholder="验证码" :prefix-icon="Lock">
                        <!--复合型输入框: https://element-plus.youqua.cn/zh-CN/component/input.html -->
                        <template #append>
                            <span @click="countdownChange">{{ countdown.validText }}</span>
                        </template>
                    </el-input>
                
                </el-form-item>
<!-- 注册按钮表单 -->
                <el-form-item>
                    <!-- 注意style是要做动态绑定的要不然不报错也不生效 -->
                     <!-- 表单校验 https://element-plus.youqua.cn/zh-CN/component/form.html-->
                    <el-button type="primary" :style="{width:'100%'}" @click="submitForm(loginFormRef)">
                        {{ formType ? '注册账号' : "登录"}}
                    </el-button>
                </el-form-item>
            </el-form>

        </el-card>

    </el-row>
</template>

<script setup>
import {ref,reactive} from 'vue';
import { getcode, userAuthentication, login } from '../../api';
import { ElMessage } from 'element-plus';
// 主要做页面跳转
import { useRouter } from "vue-router"
// 如果不导入element-plus包是不会显示icon图标的
import {UserFilled,Lock} from  '@element-plus/icons-vue';

const router = useRouter()
// <!-- vite导入静态资源 https://vitejs.cn/vite3-cn/guide/assets.html -->
// 导入图片使用 new url方式 https://vitejs.cn/vite3-cn/guide/assets.html
const imgUrl = new URL('../../../public/login-head.png',import.meta.url).href

//表单数据提交 接口地址 https://apifox.com/apidoc/shared-205c93aa-6b50-4a1a-85be-b93dc5304443/api-189157758
const loginForm = reactive({
    userName: '',
    passWord: '',
    validCode: ''
})

// 验证码文案显示
const countdown = reactive({
    validText:'获取验证码',
    // 倒计时
    time:60
})


// 登录校验 校验手机号
const validatorUser = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入账号'));
  } else {
    const phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
    if (phoneReg.test(value)) {
      callback();
    } else {
      callback(new Error('手机号格式有误，请重新输入正确手机号'));
    }
  }
};

// 登录校验 校验密码
const validatorPass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'));
  } else {
    const passReg = /^[a-zA-Z0-9_-]{4,16}$/;
    if (passReg.test(value)) {
      callback();
    } else {
      callback(new Error('密码格式有误，要求4-16位字符，且字符需要包含小写字母、数字'));
    }
  }
};

// 登录校验 自定义校验规则 https://element-plus.youqua.cn/zh-CN/component/form.html
// 注意定义 函数声明会被提升到作用域的顶部，但函数表达式不会。因此，你需要确保这些函数在使用之前已经被定义。
// trigger: 'blur' 意思为失去交单的时候就开始进行表单校验  'submit' 代表提交才校验
const rules = reactive({
  userName: [{ validator: validatorUser, trigger: 'submit' }],
  passWord: [{ validator: validatorPass, trigger: 'submit' }]
});


const loginFormRef = ref();

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(loginForm, 'submit!');
    //   注册页面
      if (formType.value) {
        userAuthentication(loginForm).then(({ data }) => {
          if (data.code === 10000) {
            ElMessage.success('注册成功，请登录');
            formType.value = 0;
          }
        });
      } 
    //   登录页面
      else {
        login(loginForm).then(({ data }) => {
          ElMessage.success('登录成功！');
          console.log('data', data);
        //   将token等用户信息缓存在浏览器客户端中
        localStorage.setItem('pz-token',data.data.token)
        localStorage.setItem('pz-userInfo',data.data.userInfo)
        router.push('/')
        });
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};

// 验证码逻辑
let flag = false
const countdownChange = ()=>{
    // 1。如果发过了就不发了
    if(flag) return
    // 2.正则校验手机号
    const phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    if(!loginForm.userName || !phoneReg.test(loginForm.userName)){
        // 消息提示 https://element-plus.youqua.cn/zh-CN/component/message.html
        ElMessage({
        message: '手机号格式有误，请重新输入',
        type: 'error'
    })
    return
    }
    //3.倒计时调整
    const time = setInterval(() =>{
        if(countdown.time <= 0){
            countdown.time = 60
            countdown.validText = '获取验证码'
            flag = false
            clearInterval(time)
        }else{
            countdown.time-=1
            countdown.validText = `剩余${countdown.time}s`
        }


},1000)

// 使用axios发送验证码
getcode({tel : loginForm.userName}).then(({data}) => {
    if(data.code === 10000){
        console.log('发送成功')
        ElMessage.success('发送成功')
    }
})

flag = true
}


// 切换表单 (0登录 1注册)
const formType = ref(0)
const handleChange = () => {
    formType.value = formType.value ? 0 : 1
}
</script>


<style lang="less" scoped>
:deep(.el-card__header) {
    padding: 0
  }
  .login-container {
    height: 100%;
    .card-header{
      background-color: #899fe1;
      img {
        width: 430px;
      }
    }
    .jump-link {
      text-align: right;
      margin-bottom: 10px;
    }
  }
</style>
